<template>
    <div class="home-nav">
        <div class="item ">
            <div class="item-box translateY" >
                 <b>住宅</b>
                <p>畅想美好生活</p>
                <span class="iconfont icon-thin-_home_flat house-icon"></span>
            </div>
           
        </div>
        <div class="item ">
           <div class="item-box translateY">
                 <b>公寓</b>
                <p>开启精致生活</p>
                <span class="iconfont icon-ershoufang house-icon"></span>
            </div>
        </div>
        <div class="item ">
            <div class="item-box translateY">
                 <b>别墅</b>
                <p>尽享优质生活</p>
                <span class="iconfont icon-kezhangongyu house-icon"></span>
            </div>
        </div>
        <div class="item ">
            <div class="item-box translateY">
                 <b>商业</b>
                <p>找商铺办公室</p>
                <span class="iconfont icon-shangyejianzhu house-icon"></span>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup(props) {
    const router = useRouter();
    const topage = (route, id) => {
      router.push({ path: route, query: { id } });
    };
    return {
      topage,
    };
  },
});
</script>

<style lang="scss">
.home-nav {
    background: #f2f2f2;
    position: relative;
    z-index: 1;
    width: 1200px;
    margin: 0 auto;
    margin-top: 42px;
    display: flex;
    .item {
        background: #f8f8f8;
        width: 296px;
        height: 182px;
        margin-left: 1px;
        flex: 1;
        .item-box{
            height: 178px;
            border: 2px solid #fff;
            position: relative;
            text-align: center;
            background: #fff;
            &:hover {
                .iconfont {
                    color: #3F85FF;
                    transition: all 0.3s;
                }
            }
        }
        
        b{
            display: block;
            margin-top: 22px;
            font-size: 22px;
            color: #333333;
            font-weight: 600;
        }
        p{
            margin-top: 4px;
            font-size: 14px;
            color: #666666;
            margin-bottom: 0;
        }
        .house-icon {
            font-size: 60px;
            color: #777;
        }
    }
}
</style>
